<template>
	<view class="container">
		<block>
			<block v-if="st == 1">
				<form @submit="subform">
					<view class="apply_box">
						<view class="address-add flex-y-center" @tap="goto"
							data-url="/pages/address/address?fromPage=offline">
							<view class="f1">
								<image class="img" :src="static_url + '/static/img/address.png'" />
							</view>
							<view class="f2 flex1" v-if="address.id">
								<view style="font-weight:bold;color:#111111;font-size:30rpx">{{ address.name }}
									{{ address.tel }} <text v-if="address.company">{{ address.company }}</text></view>
								<view style="font-size:24rpx">{{ address.area }} {{ address.address }}</view>
							</view>
							<view v-else class="f2 flex1">请选择收货地址</view>
							<image src="/static/img/arrowright.png" class="f3"></image>
						</view>

						<view class="apply_item">
							<view><text style="color:red"> *</text>消费名称</view>
							<view class="flex-y-center"><input type="text" name="name" :value="info.name"
									placeholder="请输入消费名称"></input></view>
						</view>
						<view class="apply_item" style="border-bottom:0"><text><text style="color:red">
									*</text>消费凭证</text></view>
						<view class="flex" style="flex-wrap:wrap;padding-bottom:20rpx;">
							<view v-for="(item, index) in pic" :key="index" class="layui-imgbox">
								<view class="layui-imgbox-close" @tap="removeimg" :data-index="index" data-field="pic">
									<image src="/static/img/ico-del.png"></image>
								</view>
								<view class="layui-imgbox-img">
									<image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image>
								</view>
							</view>
							<view class="uploadbtn"
								:style="'background:url(' + static_url + '/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'"
								@tap="uploadimg" data-field="pic" v-if="pic.length < 5"></view>
						</view>
						<input type="text" hidden="true" name="pic" :value="pic.join(',')" maxlength="-1"></input>

						<view style="padding:30rpx 0"><button form-type="submit" class="set-btn"
								:style="'background:' + t('color1') + ' '">提交申请</button>
						</view>
						<view class="tips">
							备注：请填写收货地址，我们后台审核通过您的申请后，会把赠品寄到您填写的地址
						</view>
					</view>
				</form>
			</block>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,
			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,
			st: 1,
			pic: [],

			address: [],
		};
	},

	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.st = this.opt.st || 1;
		this.getdata();

	},
	onShow() {

	},
	onPullDownRefresh: function () {
		this.getdata();

	},
	onReachBottom: function () {
		this.getdata(true);
	},
	methods: {
		getdata: function () {
			var that = this;
			that.loading = true;
			app.get('Offlineorder/address', {}, function (res) {
				that.loading = false;
				that.address = res.address;
			});
		},
		//选择收货地址
		chooseAddress: function () {
			app.goto('/pages/address/address?fromPage=offline');
		},
		todel(id) {
			var that = this;
			var id = id;
			app.confirm('确定要删除该活动吗?', function () {
				app.post('Party/del', {
					id: id
				}, function (res) {
					if (res.status == 1) {
						app.success(res.msg);
						that.getdata();
					} else {
						app.error(res.msg);
					}
				});
			});
		},
		bindStartTime1Change: function (e) {
			this.starttime = e.target.value
		},
		bindStartTime2Change: function (e) {
			this.start_time2 = e.target.value
		},
		cateChange: function (e) {
			this.cindex = e.detail.value;
			this.cid = this.clist[that.cindex].id;
		},
		uploadimg: function (e) {
			var that = this;
			var field = e.currentTarget.dataset.field
			var pics = that[field]
			if (!pics) pics = [];
			app.chooseImage(function (urls) {
				for (var i = 0; i < urls.length; i++) {
					pics.push(urls[i]);
				}
				if (field == 'pic') that.pic = pics;
			}, 1)
		},
		removeimg: function (e) {
			var that = this;
			var index = e.currentTarget.dataset.index
			var field = e.currentTarget.dataset.field
			if (field == 'pic') {
				var pics = that.pic
				pics.splice(index, 1);
				that.pic = pics;
			}
		},
		subform: function (e) {
			var that = this;
			var info = e.detail.value;
			if (info.name == '') {
				app.error('请填写消费名称');
				return false;
			}
			if (that.pic == '') {
				app.error('请上传消费凭证');
				return false;
			}
			console.log(that.address, 9999);
			if (!that.address.id) {
				app.error('请选择收货地址');
				return false;
			}
			info.address = this.address
			info.pic = that.pic
			app.showLoading('提交中');
			app.post("Offlineorder/addoffline", {
				info: info
			}, function (res) {
				app.showLoading(false);
				app.error(res.msg);
				if (res.status == 1) {
					setTimeout(function () {
						uni.navigateTo({
							url: "/pagesExt/offlineorder/lists"
						})
					}, 1000);
				}
			});
		},
	}
};
</script>
<style>
.propertyfee-list {
	width: 100%;
	padding: 20rpx
}

.propertyfee {
	width: 100%;
	display: flex;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
	align-items: center;
	position: relative;
	background: #fff;
	padding: 16rpx 24rpx 16rpx 24rpx;
}

.propertyfee .pt_left {
	background: #fff;
	width: 100%;
	display: flex;
}

.propertyfee .pt_left image {
	width: 200rpx;
	height: 180rpx;
}

.propertyfee .pt_left .d-list-title {
	font-size: 24rpx;
	color: #333;
	line-height: 40rpx;
	font-weight: 600;
}

.propertyfee .pt_left .d-list-title text {
	font-size: 24rpx;
	color: #999;
	font-weight: normal;
	padding-left: 24rpx;
}

.propertyfee .pt_left .houseinfo {
	font-size: 26rpx;
	color: #999;
	padding: 24rpx 0;
}

.propertyfee .pt_left .paytime {
	font-size: 26rpx;
	color: #999;
}

.repair-list {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	flex-wrap: nowrap;
	padding: 18rpx;
}

.propertyfee .pt_right {
	background: #fff;
	width: 30%;
	text-align: right;
	min-height: 152rpx;
}

.propertyfee .pt_right .totalprice {
	font-size: 28rpx;
	font-weight: 600;
}

.propertyfee .pt_right .paystatus {
	font-size: 26rpx;
	color: #999;
	padding-top: 56rpx;
}

.propertyfee .pt_right .paystatus text {
	font-size: 28rpx;
	padding-left: 8rpx;
	color: #999;
}

.payerror {
	color: #FD4A46 !important;
}

.unpay {
	color: #427fe9 !important;
}

.submit-btn {
	display: flex;
	justify-content: space-between;
	padding: 0rpx 48rpx 106rpx 48rpx;
}

.btn {
	height: 100rpx;
	line-height: 100rpx;
	flex: 1;
	margin: 0 auto;
	margin-top: 50rpx;
	color: #fff;
	font-size: 30rpx;
	font-weight: bold;
	border-radius: 0rpx 20rpx 20rpx 0rpx;
}


.house-info {
	border-top: 2rpx solid #f6f6f6;
	padding: 30rpx 20rpx;
	margin-top: 16rpx;
	/*justify-content: space-between;*/
	background-color: #FFFFFF;
}

.house-info2 {
	display: flex;
}

.total-info {
	display: flex;
	padding: 24rpx 0rpx 10rpx 0rpx;
	justify-content: space-between;
}

.total-title {
	font-weight: bold;
	font-size: 28rpx;
	padding-left: 24rpx;
}

.total-content {
	font-size: 28rpx;
	background: #f2f2f2;
	height: 82rpx;
	line-height: 82rpx;
	border-radius: 4rpx;
	margin-top: 24rpx;
	padding-left: 32rpx;
}

.tp-input {
	padding: 20rpx 20rpx;
	margin-top: 16rpx;
	background-color: #FFFFFF;
}

.tp-lv {
	font-weight: bold;
	font-size: 28rpx;
	padding-bottom: 24rpx;
	padding-left: 24rpx;
}

.tp-input .add {
	border: 2rpx solid #eeeeee;
	width: 25%;
	padding: 48rpx 0rpx;
	text-align: center;
	font-size: 48rpx;
}

.tp-input .tips {
	color: #9a9a9a;
	padding-top: 12rpx;
}

.tp-input radio-group {
	color: #9a9a9a;
}

.form-item4 {
	width: 100%;
	background: #fff;
	padding: 20rpx 24rpx;
	margin-top: 1px;
}

.form-item4 .label {
	width: 280rpx;
	font-size: 28rpx;
	font-weight: bold;
	display: flex;
}

.form-item4 text {
	color: #999999;
	padding-left: 24rpx;
	font-weight: normal;
}

.mobile-btn {
	background-color: #FFFFFF;
	color: #333333;
	border-radius: 20rpx 0rpx 0rpx 20rpx;
}

.repair-content {
	font-size: 24rpx;
	color: #999999
}

.layui-imgbox {
	margin-right: 16rpx;
	margin-bottom: 10rpx;
	font-size: 24rpx;
	position: relative;
}

.layui-imgbox-close {
	position: absolute;
	display: block;
	width: 32rpx;
	height: 32rpx;
	right: -16rpx;
	top: -16rpx;
	color: #999;
	font-size: 32rpx;
	background: #fff
}

.layui-imgbox-close image {
	width: 100%;
	height: 100%
}

.layui-imgbox-img {
	display: block;
	width: 200rpx;
	height: 200rpx;
	padding: 2px;
	border: #d3d3d3 1px solid;
	background-color: #f6f6f6;
	overflow: hidden
}

.layui-imgbox-img>image {
	max-width: 100%;
}

.layui-imgbox-repeat {
	position: absolute;
	display: block;
	width: 32rpx;
	height: 32rpx;
	line-height: 28rpx;
	right: 2px;
	bottom: 2px;
	color: #999;
	font-size: 30rpx;
	background: #fff
}

.uploadbtn {
	position: relative;
	height: 200rpx;
	width: 200rpx
}


.dialog-container {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
}

.dialog-container.down {
	align-items: flex-end;
}

.dialog-container.down .dialog-content {
	/*border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;*/
	position: absolute;
	width: 90%;
	height: auto;
	/* background-color: rgba(0,0,0,0.7); */
	border-radius: 20rpx;
	top: 33%;
	border-radius: 20rpx;
	transform: translate(-50%);
	left: 50%;
}

.dialog-gray-view {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}

.dialog-container.show .dialog-gray-view {
	display: block;
	animation: fadeIn 0.5s;
	-webkit-animation: fadeIn 0.5s;
	/* Safari 与 Chrome */
}

.dialog-container.hide .dialog-gray-view {
	display: block;
	animation: fadeOut 0.5s;
	-webkit-animation: fadeOut 0.5s;
	/* Safari 与 Chrome */
}

.dialog-content {
	height: auto;
	width: 100%;
	background-color: rgba(244, 244, 244);
	position: relative;
	z-index: 2;
	transform: translateY(100%);
	transition: all 0.6s;
	-webkit-transition: all 0.6s;
	/* Safari */
}

.dialog-container.show .dialog-content {
	/*transform:translateY(0%);*/
}

.iconfont.flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@-webkit-keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.House-info {
	/*padding: 10rpx 20rpx;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;*/
	padding: 10rpx 20rpx;
	background-color: #fff;
	border-radius: 20rpx;
}

.House-info-title {
	font-size: 32rpx;
	line-height: 40rpx;
	color: #222;
	font-weight: bold;
	padding: 20rpx;
	display: flex;
}

.housecancel {
	font-size: 26rpx;
	color: #999999;
	font-weight: normal;
	text-align: right;
	flex: 1
}

.House-content {
	padding: 20rpx 20rpx 40rpx 20rpx;
}

.House-list {
	/*height: 80rpx;
		line-height: 80rpx;*/
	padding-bottom: 20rpx;
}

.House-list .name {
	font-size: 28rpx;
	color: #666;
	padding-left: 20rpx;
}

.House-list .icon-weixuanzhong {
	color: #e3e3e3 !important;
	/*background-color: #f6f6f6;*/
	border-radius: 100%;
}

.House-list .icon-xuanzhong {
	color: #427fe9;
}

.House-info .sure-btn {
	/*margin: 30rpx 0rpx 60rpx 0rpx;*/
}

.total-content2 {
	display: flex;
}

.House-list2 {
	/*height: 80rpx;
		line-height: 80rpx;*/
	padding-left: 24rpx;
}

.House-list2 .name {
	font-size: 28rpx;
	color: #427fe9;
	padding-left: 20rpx;
}

.House-list2 .icon-weixuanzhong {
	color: #e3e3e3 !important;
	/*background-color: #f6f6f6;*/
	border-radius: 100%;
}

.House-list2 .icon-xuanzhong {
	color: #427fe9;
}

.sure-btn {
	display: flex;
	width: 86%;
	justify-content: center;
	align-items: center;
	background-color: #427fe9;
	height: 80rpx;
	font-size: 28rpx;
	font-weight: 600;
	color: #fff;
	border-radius: 20rpx;
	margin: auto;
}

.dd-tab2-content .item {
	font-size: 30rpx;
}

.artilce-top {}

.artilce-top image {
	width: 100%;
}

.party_list {
	padding: 10rpx 16rpx;
	background: #f6f6f7;
	margin-top: 6rpx;
}


.party_list .party-itemlist {
	position: relative;
	background: #fff;
	border-radius: 9rpx;
	margin: 20rpx;
}

.party_list .party-itemlist .party-pic {
	width: 200rpx;
	height: 200rpx;
	overflow: hidden;
	background: #ffffff;
	padding-bottom: 25%;
	position: relative;
	border-radius: 16rpx;
}

.party_list .party-itemlist .party-pic .image {
	width: 100%;
	height: 200rpx !important;
}

.apply-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.apply-add {
	color: #fff;
	background: #ba1f25;
	padding: 12rpx 36rpx;
	border-radius: 26rpx;
}

.apply-view {
	color: #fff;
	background: #e99e44;
	padding: 12rpx 36rpx;
	border-radius: 26rpx;
}

.party_list .party-itemlist .party-info {
	width: 70%;
	height: auto;
	overflow: hidden;
	padding: 0 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.party_list .party-itemlist .party-info .p1 {
	color: #010101;
	font-size: 26rpx;
	padding: 8rpx 0rpx;
}

.party_list .party-itemlist .party-info .p2 {
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 24rpx;
	color: #a88;
	overflow: hidden;
	padding-bottom: 6rpx
}

.party_list .party-item3 {
	width: 32%;
	display: inline-block;
	position: relative;
	margin-bottom: 12rpx;
	background: #fff;
	border-radius: 8rpx;
}

/*.party-item3:nth-child(even){margin-right:2%}*/
.party_list .party-item3 .party-pic {
	width: 100%;
	height: 0;
	overflow: hidden;
	background: #ffffff;
	padding-bottom: 70%;
	position: relative;
	border-radius: 8rpx 8rpx 0 0;
}

.party_list .party-item3 .party-info {
	padding: 10rpx 20rpx 20rpx 20rpx;
	display: flex;
	flex-direction: column;
}

.party_list .party-item3 .party-info .p1 {
	color: #222222;
	font-weight: bold;
	font-size: 28rpx;
	line-height: 46rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.party_list .party-item3 .party-info .p2 {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding-top: 10rpx;
	font-size: 24rpx;
	color: #a88;
	overflow: hidden
}

.p3 {
	color: #8c8c8c;
	font-size: 28rpx;
	line-height: 46rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.party-top {
	display: flex;
	padding: 30rpx 20rpx 0rpx 20rpx;
}

.party-bottom {
	margin-top: 24rpx;
	border-top: 2rpx solid #999;
	padding: 30rpx 20rpx 30rpx 20rpx;
}

.addparty {
	position: fixed;
	background-color: #fff;
	height: 158rpx;
	width: 100%;
	line-height: 158rpx;
	bottom: 0;
}

.addbtn {
	background-color: #ba1f25;
	color: #fff;
	border-radius: 53rpx;
	width: 80%;
	height: 88rpx;
	line-height: 88rpx;
	margin: auto;
	text-align: center;
	margin-top: 26rpx;
}

/*创建活动*/
radio {
	transform: scale(0.6);
}

checkbox {
	transform: scale(0.6);
}

.c-pages {
	background: linear-gradient(90deg, #ffa374 0%, #ff688b 100%);
}

.apply-top {}

.apply-top image {
	width: 100%;
}

.apply_box {
	padding: 2rpx 24rpx 0 24rpx;
	background: #fff;
	margin: 20rpx 24rpx;
	border-radius: 10rpx
}

.apply_title {
	background: #fff
}

.apply_title .qr_goback {
	width: 18rpx;
	height: 32rpx;
	margin-left: 24rpx;
	margin-top: 34rpx;
}

.apply_title .qr_title {
	font-size: 36rpx;
	color: #242424;
	font-weight: bold;
	margin: 0 auto;
	line-height: 100rpx;
}

.apply_item {
	line-height: 100rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #eee
}

.apply_box .apply_item:last-child {
	border: none
}

.apply_item input {
	width: 100%;
	border: none;
	color: #111;
	font-size: 28rpx;
	text-align: right
}

.apply_item input::placeholder {
	color: #999999
}

.apply_item textarea {
	width: 100%;
	min-height: 200rpx;
	padding: 20rpx 0;
	border: none;
}

.apply_item .upload_pic {
	margin: 50rpx 0;
	background: #F3F3F3;
	width: 90rpx;
	height: 90rpx;
	text-align: center
}

.apply_item .upload_pic image {
	width: 32rpx;
	height: 32rpx;
}

.set-btn {
	width: 90%;
	margin: 0 5%;
	height: 86rpx;
	line-height: 86rpx;
	border-radius: 48rpx;
	color: #FFFFFF;
	font-weight: bold;
}

.layui-imgbox {
	margin-right: 16rpx;
	margin-bottom: 10rpx;
	font-size: 24rpx;
	position: relative;
}

.layui-imgbox-close {
	position: absolute;
	display: block;
	width: 32rpx;
	height: 32rpx;
	right: -16rpx;
	top: -16rpx;
	z-index: 90;
	color: #999;
	font-size: 32rpx;
	background: #fff
}

.layui-imgbox-close image {
	width: 100%;
	height: 100%
}

.layui-imgbox-img {
	display: block;
	width: 200rpx;
	height: 200rpx;
	padding: 2px;
	border: #d3d3d3 1px solid;
	background-color: #f6f6f6;
	overflow: hidden
}

.layui-imgbox-img>image {
	max-width: 100%;
}

.layui-imgbox-repeat {
	position: absolute;
	display: block;
	width: 32rpx;
	height: 32rpx;
	line-height: 28rpx;
	right: 2px;
	bottom: 2px;
	color: #999;
	font-size: 30rpx;
	background: #fff
}

.uploadbtn {
	position: relative;
	height: 200rpx;
	width: 200rpx
}

.after {
	background: #ba1f25;
}

.address-add {
	background: #fff;
	border-radius: 20rpx;
	padding: 20rpx 3%;
	min-height: 140rpx;
	border-bottom: 1px solid #eee;
}

.address-add .f1 {
	margin-right: 20rpx
}

.address-add .f1 .img {
	width: 66rpx;
	height: 66rpx;
}

.address-add .f2 {
	color: #666;
}

.address-add .f3 {
	width: 26rpx;
	height: 26rpx;
}

.tips {
	text-align: center;
	font-size: 24rpx;
	color: #999;
	padding-bottom: 60rpx;
}
</style>